<% if (!fileRouter) { ignoreFile() } %>import { HeadContent, Outlet, Scripts, createRootRouteWithContext } from '@tanstack/solid-router'
import { TanStackRouterDevtools } from '@tanstack/solid-router-devtools'<% for(const integration of integrations.filter(i => i.type === 'layout' || i.type === 'provider')) { %>
import <%= integration.jsName %> from "<%= relativePath(integration.path) %>";
<% } %>
<% if (addOnEnabled['solid-ui']) { %>
import "@fontsource/inter"
<% } %>

<% if (addOnEnabled.start) { %>
  import { HydrationScript } from 'solid-js/web'
  import { Suspense } from 'solid-js'
<% } %>

<% if (addOns.length || integrations.length || routes.length) { %>import Header from '../components/Header'
<% } %>
<% for(const addOn of addOns) {
  for(const init of addOn.main?.initialize || []) { %>
  <%- init %>
<% } } %>

import styleCss from "../styles.css?url";

export const Route = createRootRouteWithContext()({
  head: () => ({
    links: [{ rel: "stylesheet", href: styleCss }],
  }),
  shellComponent: RootComponent,
})

<% if (addOnEnabled.start) { %>
function RootComponent() {
    return (
      <html>
        <head>
          <HydrationScript />
        </head>
        <body>
          <HeadContent />
          <Suspense>
            <% for(const integration of integrations.filter(i => i.type === 'provider')) { %>
              <<%= integration.jsName %>>
            <% } %>
            <% if (addOns.length || integrations.length || routes.length) { %>
              <Header />
            <% } %>
            <Outlet />
            <TanStackRouterDevtools />
            <% for(const integration of integrations.filter(i => i.type === 'layout')) { %>
              <<%= integration.jsName %> />
            <% } %>
            <% for(const integration of integrations.filter(i => i.type === 'provider').reverse()) { %>
              </<%= integration.jsName %>>
            <% } %>
            </Suspense>
          <Scripts />
        </body>
      </html>
    );
}
<% } else { %>
function RootComponent() {
  return (
    <>
      <% for(const integration of integrations.filter(i => i.type === 'provider')) { %>
        <<%= integration.jsName %>>
      <% } %>
      <HeadContent />
      <% if (addOns.length || integrations.length || routes.length) { %>
        <Header />
      <% } %>
      <Outlet />
      <TanStackRouterDevtools />
      <% for(const integration of integrations.filter(i => i.type === 'layout')) { %>
        <<%= integration.jsName %> />
      <% } %>
      <% for(const integration of integrations.filter(i => i.type === 'provider').reverse()) { %>
        </<%= integration.jsName %>>
      <% } %>
      <Scripts />
    </>
  )
}
<% } %>
